<!DOCTYPE html> 
<html> 
<head> 
	<title>StubHub</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet"  href="css/jquery.mobile-1.2.0.css" />  
	<link rel="stylesheet" href="css/jqm-docs.css"/>
	<link rel='stylesheet' href='css/common.css' type='text/css' media='all'> 	
	
	<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=true"></script>

	<script src="jsfiles/jquery.js"></script>
	<script src="jsfiles/jqm-docs.js"></script>
	<script src="jsfiles/jquery.mobile-1.2.0.js"></script>
	<script src="jsfiles/common.js"></script>
	<script>		
		 window.onload = function()
		 {
			$("input[type='radio']").bind( "change", function() 
			{
				//alert("hello"+$(this).val());
				if ($(this).val() == 'choice-1')
				{
					document.getElementById('content1').style.display = "block";
					document.getElementById('content2').style.display = "none";
				}
				else
				{
					document.getElementById('content2').style.display = "block";
					document.getElementById('content1').style.display = "none";
				}
			});
		 };

	</script>
	<style type="text/css">
		#mainWrapper 
		{
			background-color:#ffffff ;
			height:900px;
		}
	</style>
</head> 
<body> 
	<div id="mainWrapper">

		<div id="headings" class="header1" >
			<img style="float:left; margin-top:3px;margin-left:6px;" src="images/banner.png"/>
			<div style="padding-top:35px;">
				<p class="heading">Where fans buy & sell tickets<sup>TM</sup></p>
			</div>
		</div>
		
		<div id="mainContent" style="margin-top:50px;">
			<p style="padding-left:20px; font-size:22px;"><b>Sign in</b></p>			
			<fieldset id="Register" data-role="controlgroup" style="width:300px; margin-left:50px;">
				<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked/>
				<label for="radio-choice-1">Already registered?</label>

				<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"  />
				<label for="radio-choice-2">New to StubHub?</label>

			</fieldset>
		</div>
		<img style="repeat:repeat" src="images/signUp_line.png">

		<div id="content1" style="margin-left:20px;">
			<label for="basic" style="font-size:18px;"><b>Email</b></label>
			<input style="width:90%" type="text" name="name" id="basic" value="" data-mini="true" />

			<label for="basic" style="font-size:18px;"><b>Password</b></label>
			<input style="width:90%" type="text" name="name" id="basic" value="" data-mini="true" /><br>

			<label style="width:300px;"><input type="checkbox" name="checkbox-0" />Remember me on this device</label><br>

			<a style="width:120px; color:#fff" class="heading" href="" data-role="button" data-transition="slideup">Sign in&nbsp;&nbsp; </a>
		</div>

		<div id="content2" style="margin-left:20px; display:none">
			<label for="basic" style="font-size:18px;"><b>We just need a little info to begin. Your order will be covered by our <font color="#3366ff">FanProtect<sup>TM</sup> Guarantee</font>.</b></label>

			<label for="basic" style="font-size:18px;"><b>Email</b></label>
			<input style="width:90%" type="text" name="name" id="basic" value="" data-mini="true" />

			<label for="basic" style="font-size:18px;"><b>Re-enter email</b></label>
			<input style="width:90%" type="text" name="name" id="basic" value="" data-mini="true" />

			<label for="basic" style="font-size:18px;"><b>Password</b> <i>  (8-20 characters)</i></label>
			<input style="width:90%" type="text" name="name" id="basic" value="" data-mini="true" />

			<label for="basic" style="font-size:18px;"><b>Re-enter password</b></label>
			<input style="width:90%" type="text" name="name" id="basic" value="" data-mini="true" />

			<label for="basic" style="font-size:18px;"><b>Country</b></label>
			<div style="width:90%">
				<select name="country" id="country" data-mini="true">
				   <option value="">Choose your country</option>
				   <option value="">America</option>
				   <option value="">India</option>
				   <option value="">Pakistan</option>
				   <option value="">Spain</option>
				</select>
			</div><br>

			<label style="width:600px;"><input type="checkbox" name="checkbox-0" />I agree to the StubHub User Agreement and Privacy Policy.</label>
			<label style="width:600px;"><input type="checkbox" name="checkbox-0"  checked />Sign me up for StubHub.com emails to get timely event updates.</label><br>

			<a style="width:120px; color:#fff" class="heading" href="" data-role="button" data-transition="slideup">Continue&nbsp;&nbsp; </a>
		</div>

	</div>
</body>
</html>